<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :rules="rules">
                    <a-form-model-item style="display: none">
                        <a-input v-model="mdl.id"/>
                    </a-form-model-item>

                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.temName','模版名称')" prop="name">
                                <rx-input-i18n :placeholder="i18n('form.temName','模板名称','input')" @blur="getPinyinByName"
                                               v-model="mdl.i18nJson"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$ti18('rxForm.rxAlias', '别名')" prop="alias">
                                <a-input :placeholder="$ti18('rxForm.rxAlias', '别名')" v-model="mdl.alias"/>
                            </a-form-model-item>
                        </a-col>

                    </a-row>

                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.templateType','模版类型')" prop="type">
                                <a-select :placeholder="i18n('form.templateType','模版类型')" :options="typeOptions" v-model="mdl.type"></a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.category','类别')" prop="category">
                                <a-select :placeholder="i18n('form.category','类别')" :options="categoryOptions" v-model="mdl.category"></a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>

                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.template','模版')"
                                               prop="template">
                                <rx-codemirror class="mirrors"  v-model="mdl.template" ref="codemirror"
                                               mode="html" style="height:calc(100% - 200)"></rx-codemirror>
                            </a-form-model-item>
                        </a-col>
                    </a-row>

                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
    import FormTemplateApi from '@/api/form/core/formTemplate'
    import {RxDialog, BaseFormModel} from "@lowcode/jpaas-common-lib";

    export default {
        name: 'FormTemplateEdit',
        mixins: [BaseFormModel],
        components: {
            RxDialog,
        },
        data() {
            return {
                typeOptions: [
                    {value: "pc", label: this.i18n('list.pcTem','pc模板')},
                    {value: "list", label: this.i18n('list.listTem','列表模板')},
                    {value: "mobile", label: this.i18n('list.phoneTem','手机模板')},
                    {value: "print", label: this.i18n('list.printTem','打印模板')}
                ],
                categoryOptions: [
                    {value: "main", label: this.i18n('list.masterTable','主表')},
                    {value: "onetoone", label: this.i18n('list.oneToOne','子表一对一')},
                    {value: "onetomany", label: this.i18n('list.oneToMany','子表一对多')},
                    {value: "field", label: this.i18n('list.field','字段')},
                    {value: "opinion", label: this.i18n('list.opinion','意见')}
                ],
                rules: {
                    i18nJson: [{required: true, message: this.i18n('form.temName','模版名称','input'), trigger: 'change'}],
                    alias: [{required: true, message: this.$ti18('rxForm.rxAlias', '别名','','input'), trigger: 'change'}],
                    template: [{required: false, message: this.i18n('form.category','模版','input'), trigger: 'change'}],
                    type: [{required: true, message: this.i18n('form.templateType','模版类型','select'), trigger: 'change'}],
                    category: [{required: true, message: this.i18n('form.category','类别','select'), trigger: 'change'}],
                    fileName: [{required: true, message: this.i18n('form.fileName','文件名称','select'), trigger: 'change'}],
                    path: [{required: true, message: this.i18n('form.filePath','文件路径','input'), trigger: 'change'}],
                }
            }
        },
        created() {
            this.codeMirror();

        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "formTemplate", key);
            },
            codeMirror() {//在弹窗中引用codemirror会出现样式混乱，延时渲染就好了yx；
                var _this = this;
                this.$nextTick(function () {
                    setTimeout(function () {
                        if (_this.$refs.codemirror) {
                            _this.$refs.codemirror.refresh();
                        }
                    }, 1000)
                })
            },
            get(id) {
                return FormTemplateApi.get(id);
            },
            save(values) {
                return FormTemplateApi.save(values);
            },
            getPinyinByName(){
                let name=this.mdl.i18nJson;
                if (!name){
                    return;
                }
                if (this.form && this.mdl.alias){
                    return;
                }
                this.getPinyin(this.$i18(name,'模板名称')).then(res => {
                    //去除不可见的特殊符号
                    if(res){
                        res=res.replace(/\u200B/g,'');
                    }
                    this.$set(this.mdl,"alias",res)
                })
            }

        }
    }
</script>
<style scoped>
</style>
